<template>
	<!-- 管理约单报名 -->
	<view>
		<!-- <uni-notice-bar color="#000" background-color="#fffbd7" single :text="NoticeMemo" v-if="isType == 0 " /> -->
		
		<scroll-view scroll-y @scrolltolower="onPullUpLoading()" :style="{ height: height + 'px' }">
			<view style="height: 100vh;display: flex;justify-content: center;align-items: center;" v-if="SignUpList.length == 0">
				暂无数据
			</view>
			<view v-else>
				<view style="padding: 20rpx;margin: 20rpx;background-color: #fff;border-radius: 5rpx;" v-for="(item,index) in SignUpList" :key="index" >
					<view class="" @click="onNavDetail(`/reservationorder/details?OrderID=${item.ReservationOrderID}` )">
						<view class="flexbc" style="clear:both;">
							<view class="noticeTitle">
								<text>约 {{ item.ClassName }}</text>
								<text style="margin-left:0rpx">・</text>
								<text v-if="JSON.parse(item.PriceType).value === 1">
									<text>¥</text>
									<text v-if="item.PriceQujian === 0">{{ item.Price|formatPrice }}</text>
									<text v-else>{{ item.StartPrice|formatPrice }} ~ {{ item.EndPrice|formatPrice }}</text>
									<text>{{ JSON.parse(item.Unit).text}}</text>
								</text>
								<text v-else>{{ JSON.parse(item.PriceType).result }}</text>
							</view>
							<view>
								<fui-icon name="location" :size="28"></fui-icon>
								<text class="onCity">{{ item.City?item.City:'全国' }}</text>
							</view>
						</view>
						<view class="flexbc">
							<view class="leftTexts">
								<view style="font-size:24rpx;color:#999;padding-top:10rpx;padding-bottom:10rpx;">{{item.ReservationOrderMemo}}</view>
							</view>
						</view>
					</view>
					
					<view>
						<view style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;border-top: 1rpx solid #eeeeee;padding-top:20rpx">
							<view style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
								<image :src="item.SignupWxHeadPic" style="width: 80rpx;height: 80rpx;border-radius: 50%;" mode="widthFix"></image>
								<view style="margin-left: 20rpx;">
									<view style="font-size: 26rpx;">
										<text>{{ item.SignupNickName }}</text>
									</view>
									<view style="font-size: 22rpx; color: #cfcfcf;margin-top: 10rpx;">
										<text v-for="(itm, idx) in item.UserRoles" :key="idx">
											<text> {{ itm}} </text> 
											<text v-if="idx != (item.UserRoles.length - 1)" style="padding: 0 10rpx;">·</text> 
										</text>
									</view>
								</view>	
							</view>
							<view class="">
								<view style="text-align: right;font-size:26rpx;color: #54d5ff;" @click.stop="onNavDetail(`/myPages/pages/signUpReservationorderDetail?OrderSignupID=${item.OrderSignupID}&SignupUserID=${item.SignupUserID}`)">
									联系TA
								</view>
								<view style="font-size: 22rpx; margin-top: 10rpx; color: #cfcfcf;">
									{{ $common.timeDiff(item.addTime,new Date()) }}
								</view>
							</view>
									
						</view>
						<view style="margin-top: 10rpx;font-size: 24rpx;display:flex;justify-content: flex-start;flex-direction: row;align-items: flex-start;">
							<view class="" style="flex: 1;color: #cfcfcf;">
								报名理由：
							</view>
							<view class="" style="flex: 2;text-align:right;word-wrap: break-word;word-break: break-all;">
								{{ item.SignupMemo }}
							</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="more"></uni-load-more>
			</view>
		
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() { 
			return {
				SignUpList: [],
				NoticeID: 0,
				isType: 0,
				page: 1,
				height: 0,
				more: 'more',
			}
		},
		onLoad(options) {
			console.log('options', options)
			this.ReservationOrderID = options.ReservationOrderID ? options.ReservationOrderID : 0;
			this.getReservationOrderList()
		},
		onShow() {
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(100);
		},
		methods: {
			onPullUpLoading() {
				this.page += 1;
				this.getReservationOrderList();
			},
			onNavDetail(url) {
				uni.navigateTo({
					url
				})
			},
			// 打电话
			onContactHe(phone) {
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			getReservationOrderList() {
				this.$httpost('/ReservationOrders/ReservationOrderSignUpList', { ReservationOrderID: this.ReservationOrderID, page: this.page  }).then(res => {
					
					if (res.code == 200) {
						if (this.SignUpList.length != 0) {
							this.SignUpList = [...this.SignUpList, ...res.data];
							if (res.data.length == 0) this.more = 'onMore'
						} else {
							this.SignUpList = res.data;
							this.more = 'more'
						}
					}
				})
			}
		},
		
	}
</script>

<style>
</style>